<template>
	<view>
		<u-navbar :is-back="true" :background="background" :custom-back="customBack" back-icon-color="#4b5ad9">
			<u-avatar :src="$url + user.icon" size="mini" mode="square"></u-avatar>
			<text class="nav-text">{{user.nickname}}</text>
			<u-icon name="phone-fill" color="#4b5ad9" size="50"></u-icon>
			<u-icon name="photo" color="#4b5ad9" size="50" @click="upImage"></u-icon>
			<u-icon name="list-dot" color="#4b5ad9" size="50" @click="show = true"></u-icon>
		</u-navbar>
		<view class="wrap">
			<view class="demo-warter" v-for="(item, index) in flowList" :key="index">
				<view v-if="item.fromId == user.uuId">
					<view v-if="item.msgType == 'text'" class="con-bubble-left">
						<u-avatar :src="$url+item.fromIcon" size="mini" mode="square"></u-avatar>
						<view class="bubble">
							<view class="bubble-arrow-left"></view>
							<view class="bubble-content-left">{{item.content}}</view>
						</view>
					</view>
					<!-- v-if="item.msgType == 'IMG'" -->
					<view v-if="item.msgType == 'IMG'" class="con-bubble-left">
						<u-avatar :src="$url+item.fromIcon" size="mini" mode="square"></u-avatar>
						<u-lazy-load class="img-left-i" mode="aspectFit" :image="$url + item.content" border-radius="20">
						</u-lazy-load>
					</view>
					<view v-if="item.msgType == 'VIDEO'" class="con-bubble-left">
						<u-avatar :src="$url+item.fromIcon" size="mini" mode="square"></u-avatar>
						<!-- <video controls id="videoId" @play="play" @fullscreenchange="fullscreenchange" class="img-left"
							:src="$url + item.content">
						</video> -->
						<view style="position: relative;width: 40%;margin-left: 10rpx;"
							@click="clickVideo(item.content)">
							<image class="img-left" :src="img">
							</image>
							<u-icon name="play-circle" size="80" class="icon-v"></u-icon>
						</view>
					</view>
				</view>
				<view v-if="item.fromId == myId">
					<view v-if="item.msgType == 'text'" class="con-bubble-right">
						<view class="bubble">
							<view class="bubble-content-right">{{item.content}}</view>
							<view class="bubble-arrow-right"></view>
						</view>
						<u-avatar :src="$url+item.fromIcon" size="mini" mode="square"></u-avatar>
					</view>
					<view v-if="item.msgType == 'IMG'" class="con-bubble-right">
						<u-lazy-load class="img-right-i" mode="aspectFit" :image="$url + item.content" border-radius="20">
						</u-lazy-load>
						<u-avatar :src="$url+item.fromIcon" size="mini" mode="square"></u-avatar>
					</view>
					<view v-if="item.msgType == 'VIDEO'" class="con-bubble-right">
						<view style="position: relative;width: 40%;margin-right: 10rpx;"
							@click="clickVideo(item.content)">
							<image class="img-right" :src="img">
							</image>
							<u-icon name="play-right-fill" size="80" class="icon-v"></u-icon>
						</view>
						<u-avatar :src="$url+item.fromIcon" size="mini" mode="square"></u-avatar>
					</view>
				</view>
			</view>
			<view style="height: 130rpx;"></view>
		</view>


		<view class="con_bottom">
			<image src="../../../static/images/desire/bq1.png"></image>
			<view class="search">
				<u-search v-model="form.keyword" :show-action="true" action-text="发送" :animation="true" placeholder=""
					search-icon="" :clearabled="false" bg-color="#f2f3f7" :action-style="actionStyle"
					@custom="searchBank(100)" @search="searchBank(100)">
					>
				</u-search>
			</view>
			<u-icon name="mic" color="#4b5ad9" size="50"></u-icon>
		</view>
		<u-popup v-model="show" mode="right" width="50%">
			<view class="status_bar">
				<!-- 这里是状态栏 -->
			</view>
			<view class="popup-v">
				<view @click="upVideo">上传视频</view>
				<view>上传文件</view>
			</view>

		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img: "../../../static/images/desire/v.jpg",
				show: false,
				myId: '',
				user: {},
				actionStyle: {
					lineHeight: '34px',
					borderRadius: '10px',
					backgroundColor: '#4b5ad9',
					color: '#fff'
				},
				form: {
					keyword: '',
					imgUrl: '',
					videoUrl: '',
				},
				background: {
					backgroundColor: '#ffffff',
					height: '150rpx',
				},
				flowList: [],
				list: [],
			}
		},
		onLoad(options) {
			console.log(this.$url);
			this.myId = uni.getStorageSync('uuId');
			this.user = JSON.parse(decodeURIComponent(options.user));
			var list1 = uni.getStorageSync('my' + this.myId + 'toUser' + this.user.uuId);
			var list2 = getApp().globalData.chatList;
			if (list1 != null) {
				this.list = list1;
				this.addRandomData();
			}
			if (list2 != null) {
				this.list = list2;
				this.addData();
			}
			uni.$on('privateChat' + this.user.uuId, (res) => {
				console.log('接受的数据：', res)
				if (res != null) {
					// this.addData(); 
					this.flowList.push(JSON.parse(res));
				}
			})
		},
		onShow() {
			/* 隐藏凸起图标 */
			var icon = plus.nativeObj.View.getViewById("icon");
			setTimeout(function() {
				icon.hide();
			}, 100);
		},
		onUnload() {
			//最多保留50个
			console.log(this.num);
			this.flowList.splice(0, this.flowList.length - 50);
			uni.setStorageSync('my' + this.myId + 'toUser' + this.user.uuId, this.flowList);
			// uni.removeStorageSync('my'+this.myId+'toUser'+this.user.uuId,this.flowList);
			this.flowList.length = 0;
			// this.list.length = 0; 
		},
		onReachBottom() {
			// 模拟数据加载
			setTimeout(() => {

			}, 1000)
		},
		methods: {
			addRandomData() {
				for (let i = 0; i < this.list.length; i++) {
					console.log('接受的数据---------------：', this.list)
					let item = this.list[i];
					this.flowList.push(item);
				}
			},
			addData() {
				for (var i = 0; i < this.list.length; i++) {
					let fromId = this.list[i].fromId;
					let toId = this.list[i].toId;
					let myId = this.myId;
					let userId = this.user.uuId;
					let item = this.list[i];
					if (myId == fromId && userId == toId) {
						this.flowList.push(item);
						getApp().globalData.chatList.splice(i, i + 1);
						i = i - 1;
					}
					if (userId == fromId && myId == toId) {
						this.flowList.push(item);
						getApp().globalData.chatList.splice(i, i + 1);
						i = i - 1;
					}
				}
				//异步更新缓存 
				uni.setStorage({
					key: 'chatList' + uni.getStorageSync('uuId'),
					data: getApp().globalData.chatList,
				})
			},
			customBack() {
				uni.$emit('listNum', this.user.uuId)
				uni.switchTab({
					url: "/pages/tabBar/chat/chat",
				})
			},
			searchBank(state) {
				var msg = {
					fromId: uni.getStorageSync('uuId'),
					fromName: uni.getStorageSync('nickname'),
					fromIcon: uni.getStorageSync('icon'),
					toId: '',
					toName: '',
					toIcon: '',
					type: '', //区分群聊或一对一聊天等
					msgType: '', //消息类型
					content: '',
					sendTime: this.$formatTime.dateTimeStr('y-m-d h:i:s'),
				};
				msg.toId = this.user.uuId;
				msg.toName = this.user.nickname;
				msg.toIcon = this.user.icon;
				msg.type = 'TYPE_ONE'; //区分群聊或一对一聊天等
				if (state == 100) {
					msg.msgType = 'text';
					msg.content = this.form.keyword;
					this.form.keyword = '';
				}
				if (state == 200) {
					msg.msgType = 'IMG';
					msg.content = this.form.imgUrl;
					this.form.imgUrl = '';
				}
				if (state == 300) {
					msg.msgType = 'VIDEO';
					msg.content = this.form.videoUrl;
					this.form.videoUrl = '';
				}
				this.flowList.push(msg);
				console.log(JSON.stringify(msg) + '-----------------------');
				uni.$emit('oneChat', JSON.stringify(msg))
				this.$socket.send(JSON.stringify(msg));
			},
			//发送图片等消息方法 
			upImage() {
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						//如果多张图片循环上传
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: this.$url + "/files/upFiles",
								filePath: tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									let file = JSON.parse(uploadFileRes.data);
									console.log(uploadFileRes.data);
									if (file.data != null) {
										this.form.imgUrl = file.data;
										this.searchBank(200);
									}
								}
							});
						}
					}
				});
			},
			async upVideo() {
				// uploadFile 存储需要上传的文件
				let uploadFile = ''
				const res = await uni.chooseVideo({
					compressed: false,
					maxDuration: 60, // 拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。
					sourceType: ['album'], // album 从相册选视频，camera 使用相机拍摄，默认为：['album', 'camera']
				});
				if (res[1].tempFilePath != null) {
					uni.showLoading({
						mask: true,
						title: '上传中...'
					})
					uploadFile = res[1].tempFilePath;
					console.log(uploadFile+'-------------------1');
					var that2 = this;
					const arr = await uni.uploadFile({
						//集群时反向代理报错，所以指定一个资源占用较少，性能较好的服务器执行
						url: this.$url + ":8080/files/upFiles",
						filePath: uploadFile,
						name: 'file',
						// header: {
						// 	token: that2.vuex_token // 挂载请求头为用户的 token
						// },
					});
					console.log(arr+'-------------------2');
					let data = JSON.parse(arr[1].data)
					this.form.videoUrl = data.data;
					console.log('data:', data.data);
					if (data.code !== 200) { // 视频上传失败了
						uni.hideLoading()
						that2.$u.toast(data.msg)
						return
					}
					// 上传成功(把上传成功后的文件路径 push 到页面需要显示的视频数据列表中)
					this.searchBank(300);
					uni.hideLoading()
				}

			},
			clickVideo(url) {
				uni.navigateTo({
					url: "/pages/userCate/userComm/cateVideo?video=" + url
				})
			}

		},

	}
</script>

<style>
	.nav-text {
		margin-left: 10rpx;
		width: 350rpx;
		display: -webkit-box;
		/*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical;
		/*排列方式*/
		-webkit-line-clamp: 1;
		/*显示文本行数(这里控制多少行隐藏)*/
		overflow: hidden;
	}

	.con_bottom {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		background-color: #fffffd;
	}

	.con_bottom image {
		margin: 25rpx 10rpx 0 20rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.search {
		margin-top: 20rpx;
		margin-right: 10rpx;
		width: 80%;
		height: 70rpx;
	}

	.wrap {
		flex-grow: 1;
		overflow-y: auto;
	}

	.con-bubble-left {
		margin-top: 25rpx;
		padding-left: 20rpx;
		padding-right: 100rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	.img-left-i{
		width: 40%;
		margin-left: 15rpx;
		border-radius: 20rpx;
	}
	.img-left {
		width: 100%;
		border-radius: 20rpx;
	}

	.con-bubble-right {
		margin-top: 25rpx;
		padding-left: 100rpx;
		padding-right: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}

	.img-right {
		width: 100%;
		border-radius: 20rpx;
	}
	.img-right-i{
		width: 40%;
		margin-right: 15rpx;
		border-radius: 20rpx;
	}
	.icon-v {
		color: #ffffff;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.bubble {
		display: flex;
		flex-direction: row;
	}

	.bubble-arrow-left {
		margin-top: 10rpx;
		width: 0;
		height: 0;
		border-top: 14rpx solid transparent;
		border-bottom: 14rpx solid transparent;
		border-right: 18rpx solid #ffffff;
	}

	.bubble-content-left {
		padding: 10rpx;
		color: #000000;
		background-color: #ffffff;
		border-radius: 10rpx;
	}

	.bubble-arrow-right {
		margin-top: 10rpx;
		width: 0;
		height: 0;
		border-top: 14rpx solid transparent;
		border-bottom: 14rpx solid transparent;
		border-left: 18rpx solid #4b5ad9;
	}

	.bubble-content-right {
		padding: 10rpx;
		color: #fffffd;
		background-color: #4b5ad9;
		border-radius: 10rpx;
	}

	.popup-v {
		padding: 20rpx;
	}

	.popup-v view {
		margin-bottom: 20rpx;
		font-size: 30rpx;
		padding-bottom: 5rpx;
		border-bottom: 2rpx solid #9a9a9a;
	}
</style>

<style lang="scss" scoped>
	.u-navbar .u-icon {
		margin-left: 20rpx;
	}

	.u-popup {
		z-index: 999;
	}
</style>
